<template>
   <div class="Contact-information">
       <p class="p1">业务洽谈/加入咨询/会晤预约</p>
       <p class="p2">CREATE THE INTRECONNECTION OF COATING INDUSTRY</p>
       <div class="tag tag1">
           <div></div>
           <span>客服人员</span>
       </div>
       <div class="tag tag2">
           <div></div>
           <span>联系方式</span>
       </div>
       <div class="clerk">
        </div>
        <div class="clerk-info">
            <div class="clerk-info-item">
                <img src="../../assets/image/contact/clerk1.png" alt="">
                <p class="platform">涂料成品交易平台</p>
                <p class="name">天下金涂专员：黄彩燕</p>
                <p class="phone">联系电话：13025788580</p>
            </div>
            <div class="clerk-info-item">
                <img src="../../assets/image/contact/clerk2.png" alt="">
                <p class="platform">涂料原料供应平台</p>
                <p class="name">供求金链专员：刘华新</p>
                <p class="phone">联系电话：18675631077</p>
            </div>
            <div class="clerk-info-item">
                <img src="../../assets/image/contact/clerk3.png" alt="">
                <p class="platform">涂料专业代工平台</p>
                <p class="name">全域金代专员：陈鑫</p>
                <p class="phone">联系电话：18189523020</p>
            </div>
            <div class="clerk-info-item">
                <img src="../../assets/image/contact/clerk4.png" alt="">
                <p class="platform">涂料技术研发平台</p>
                <p class="name">重磅金技专员：吴培佳</p>
                <p class="phone">联系电话：13925355177</p>
            </div>

       </div>
       <p class="company-phone">公司总机：(86)756 76888 91/92/93(fax)</p>
       <div class="help-docu">
           <img class="qusetion-icon" src="../../assets/image/contact/question-mark-icon.png" alt="">
           <p class="title">帮助文档？</p>
           <p class="detail">为客户提供优质所有产品的简介、<br/>购买、入门、操作等内容。</p>
           <p class="download">下载文档</p>
           <img class="document-icon" src="../../assets/image/contact/document-icon.png" alt="">
       </div>
       
   </div>
</template>

<script>
export default {
   name: '',
   data() {
       return {}
   },
  components: {}
}
</script>

<style scoped lang="less">
.Contact-information{
    width: 100%;
    height: 13rem;
    position: relative;
    overflow: hidden;
    .p1{
        font-size: 0.4rem;
        color: #333333;
        margin-top: 0.65rem;
        text-align: center;
    }
    .p2{
        font-size: 0.24rem;
        transform: scale(5/6);
        color: #a0a0a0;
        
         text-align: center;

    }
    .tag{
        display: flex;
        align-items: center;
        width: 1.15rem;
        justify-content: space-between;
        
        div{
            width: 0.05rem;
            height: 0.21rem;
            background-color: #d4aa58;
        }
        span{
                font-size: 0.24rem;
                color: #333333;
        }
    }
    .tag1{
        position:absolute;
        top: 2.2rem;
        left: 0.3rem;
    }
     .tag2{
        position:absolute;
        top: 9.4rem;
        left: 0.3rem;
    }
    .clerk{
        width: 7rem;
        height: 5.7rem;
        background: #404e75;
        position: absolute;
        top: 3.25rem;
        left: 50%;
        transform: translateX(-50%);
        
    }
    .clerk-info{
            width: 5.5rem;
            height: 5.7rem;
            position: absolute;
            top: 2.65rem;
            left: 50%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
            transform: translateX(-50%);
            .clerk-info-item{
                width: 2.4rem;
                height: 2.5rem;
                position: relative;
                img{
                    position: absolute;
                    width: 1.2rem;
                    height: 1.2rem;
                    top: 0;
                    left: 50%;
                    transform: translateX(-50%);
                }
                .platform{
                    font-size: 0.28rem;
                    color: white;
                    position: absolute;
                    top: 1.4rem;

                }
                .name{
                    font-size: 0.24rem;
                    transform: scale(11/12);
                    transform-origin: 0 0;
                    color: white;
                    position: absolute;
                    top: 1.8rem;
                    left: 0;

                }
                .phone{
                    font-size: 0.24rem;
                    transform: scale(11/12);
                    transform-origin: 0 0;
                    color: white;
                     position: absolute;
                    top: 2.1rem;
                    left: 0;
                    white-space: nowrap;

                }
            }
        }
        .company-phone{
            font-size: 0.24rem;
            transform: scale(11/12);
            transform-origin: 0 0;
            position: absolute;
            bottom: 2.95rem;
            left:0.45rem;



        }
    .help-docu{
        width: 7rem;
        height: 1.9rem;
        background-color: #f8f9fa;
        position: absolute;
        bottom: 0.6rem;
        left: 50%;
        transform: translateX(-50%);
        .qusetion-icon{
            width: 0.28rem;
            height: 0.28rem;
            position: absolute;
            top: 0.47rem;
            left: 0.55rem;

        }
        .document-icon{
            width: 0.7rem;
            height: 0.6rem;
            position: absolute;
            top: 0.48rem;
            right: 1rem;
        }
        .title{
            font-size: 0.24rem;
            color: #333333;
            position: absolute;
            left: 0.9rem;
            top: 0.45rem;

        }
        .detail{
            font-size: 0.24rem;
            transform: scale(11/12);
            transform-origin: 0 0;
            color: #777777;
            position: absolute;
            left: 0.55rem;
            bottom: 0.4rem;
            line-height: 0.25rem;

        }
        .download{
            font-size: 0.24rem;
            transform: scale(11/12);
            color: #777777;
            position: absolute;
            bottom: 0.45rem;
            right: 0.95rem;

        }

    }
}
</style>
